<template>
	<view class="content">
		<div v-for="item in items" :key="item.id">{{ item }}</div>
		<view class="amt">
			<view class="shuxian"></view>
			<view @click="xianhua" :class="['left', isShow == true ? 'selected' : '']">
				<u-count-to :start-val="0" :end-val="flower" :duration="2000"></u-count-to>
				<text>鲜花</text>
			</view>
			<view @click="yue" :class="['right', isShow == false ? 'selected' : '']">
				<view class="box">
					￥
					<u-count-to :start-val="0" :end-val="balance" :duration="2000"></u-count-to>
				</view>
				<text>所有余额</text>
			</view>
		</view>
		<!-- 鲜花 -->
		<view class="info" v-for="(item, index) in flowerRec1" :key="index" v-if="isShow">
			<view class="mm">{{ item.momth }}</view>
			<view class="data" v-for="(item1, index1) in item.data" :key="index1">
				<view class="shouru" v-if="item1.change_value > 0">收入</view>
				<view class="shouru" v-else>支出</view>
				<view class="ddd">
					<view class="riqi">
						<text class="text" v-if="item1.change_value > 0">鲜花收入</text>
						<text class="text" v-else>鲜花支出</text>
						<text class="text1" style="color: #FF0000;" v-if="item1.change_value > 0">{{ item1.change_value }}朵</text>
						<text class="text1" style="color: #FF0000;" v-else>{{ item1.change_value }}</text>
					</view>
					<view class="tixian">
						<text>{{ item1.createtime }}</text>
						<text v-if="item1.type == 1">签到</text>
						<text v-else-if="item1.type == 2">每日学习</text>
						<text v-else-if="item1.type == 3">拉新</text>
						<text v-else-if="item1.type == 4">后台修改</text>
						<text v-else-if="item1.type == 5">报名支付</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 余额 -->
		<view class="info" v-for="(item, index) in balTurnover" :key="index" v-else>
			<view class="mm">{{ item.momth }}</view>
			<view class="data" v-for="(item1, index1) in item.data" :key="index1">
				<view class="shouru" v-if="item1.change_allvalue > 0">收入</view>
				<view class="shouru" v-else>支出</view>
				<view class="ddd">
					<view class="riqi">
						<text class="text" v-if="item1.change_allvalue > 0">资金收入</text>
						<text class="text" v-else>资金支出</text>
						<text class="text1" style="color: #FF0000;">{{ item1.change_allvalue | number }}元</text>
					</view>
					<view class="tixian">
						<text>{{ item1.createtime }}</text>
						<text v-if="item1.type == 1">直推返利</text>
						<text v-else-if="item1.type == 2">间推返利</text>
						<text v-else-if="item1.type == 3">后台操作</text>
						<text v-else-if="item1.type == 4">申请提现</text>
						<text v-else-if="item1.type == 5">提现申请被驳回</text>
						<text v-else-if="item1.type == 6">管理津贴</text>
						<text v-else-if="item1.type == 7">开发奖励</text>
						<text v-else-if="item1.type == 8">成交奖励</text>
						<text v-else-if="item1.type == 9">报名佣金</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flower: '', //花朵
			balance: '', // 金额
			page: '', //页码
			pagesize: '', // 每页的数量
			balTurnover: [], // 余额
			flowerRec1: [], //  鲜花
			isShow: true,
		};
	},
	methods: {
		xianhua() {
			this.isShow = true;
		},
		yue() {
			this.isShow = false;
		},
		//用户余额流水记录
		async balRec() {
			const res = await this.$u.post(
				'api/Commission/flow_record',
				{
					page: this.page,
					pagesize: this.pagesize,
				},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);

			// res.data.forEach(e => {
			// 	this.data.push(e);
			// });
			this.balTurnover = res.data;
			console.log('用户余额流水记录 :>> ', res);
		},
		//用户鲜花流水记录
		async flowerRec() {
			const res = await this.$u.post(
				'api/Commission/flower_record',
				{
					page: this.page,
					pagesize: this.pagesize,
				},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);

			this.flowerRec1 = res.data;
			console.log('用户鲜花流水记录>> ', res);
		},
		// 用户基础数据
		async personalCtr() {
			const res = await this.$u.post(
				'/api/User/userinfo',
				{},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			console.log('用户基础数据 >>  ', res);

			this.balance = res.data.balance;
			this.flower = res.data.flower;
		},
	},
	onLoad() {
		this.personalCtr();
		this.balRec();
		this.flowerRec();
	},
	filters: {
		number(value) {
			var toFixedNum = Number(value).toFixed();

			return toFixedNum;
		},
	},
};
</script>

<style lang="scss">
.content {
	padding: 30rpx;
	width: 100vw;
	overflow: scroll;
	height: 100vh;
	background-color: #f8f8f8;
	.amt {
		position: relative;
		width: 690rpx;
		height: 144rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		display: flex;
		.selected {
			border-bottom: 5rpx solid #6b182a;
			border-radius: 5rpx;
		}
		.left,
		.right {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text {
				font-size: 30rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #333333;
			}
			.u-count-to,
			.box {
				font-size: 48rpx;
				font-family: PingFangSC;
				font-weight: 500;
				color: #333333;
			}
		}
		.shuxian {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 4rpx;
			height: 90rpx;
			background: #f1f1f1;
			border-radius: 2rpx;
		}
	}
	.info {
		background: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 10prx;
		margin-top: 30rpx;
		padding: 0 21rpx;
		.mm {
			width: 100%;
			height: 76rpx;
			display: flex;
			align-items: center;

			font-size: 30rpx;
			font-family: PingFangSC;
			font-weight: 400;
			color: #333333;
		}
		.data {
			height: 100rpx;

			border-top: 2rpx solid #f0f0f0;
			display: flex;
			align-items: center;
			.shouru {
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #ff0000;
				border-radius: 50%;

				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 500;
				color: #ffffff;
				margin-right: 21rpx;
			}

			.ddd {
				width: 550rpx;
			}
			.riqi,
			.tixian {
				display: flex;
				justify-content: space-between;
			}
			.tixian {
				font-size: 20rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #c4c4c4;
			}
			.renqi {
				.text {
					font-size: 26rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #333333;
				}
				.text1 {
					font-size: 26rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #ff0000;
				}
			}
		}
	}
}
</style>
